<template>
  <div class="bg-white">
    <header class="search-header">
      <!-- <div class="left"></div> -->
      <!-- <div class="title"></div> -->
      <div class="input-wrap">
        <img class="icon-search" src="@/assets/images/icon_search.png" alt="">
        <input type="text" placeholder="请选择影城名称" v-model="searchValue" @input="handleChange">
        <div class="clear-mobile-btn" v-show="btnClear" @click="handleClear">
          <img src="@/assets/images/clear@1x.png" alt="">
        </div>
      </div>
      <div class="right" @click="handleCancel">取消</div>
    </header>
    <div class="cinema-init-area" v-show="isShowArea">
      <div class="cinema-nearby init-list">
        <div class="cinema-index-title">离你最近</div>
        <ul class="cinema-index-detail clearfix">
          <li class="cinema-item-detail"><div class="cinema-item-text">中影·国际影城(胜利南路店)</div></li>
          <li class="cinema-item-detail"><div class="cinema-item-text">中影国际影城鞍山铁东新华店</div></li>
          <li class="cinema-item-detail"><div class="cinema-item-text">鞍山中数联谊影城(天河店)</div></li>
          <li class="cinema-item-detail"><div class="cinema-item-text">鞍山金逸影城乐购店</div></li>
          <li class="cinema-item-detail"><div class="cinema-item-text">佳兆业国际影城(鞍山店)</div></li>
        </ul>
      </div>
    </div>

    <div class="cinema-list-wrap" v-show="isShowList && computedCinemaList.length !== 0">
      <ul class="cinema-list">
        <li v-for="item in computedCinemaList" :key="item.cinemaId">
          <!-- <router-link :to="{}"> -->
          <div class="cinema-item-warp flex justify-between">
            <div class="">
              <div class="cinemas-info">
                <span class="cinema-name ellipsis">{{ item.name }}</span>
                <span class="cinema-address ellipsis">{{ item.address }}</span>
              </div>
            </div>
            <div class="">
              <div class="cinema-price">
                <span class="cinema-lowPrice price-fmt">
                  <i>￥</i><span class="interge" style="font-size: 15px;">25</span>
                  <span style="display: none;">.</span>
                  <span class="decimal" style="font-size: 15px;"></span>
                  <span style="display: none;">.</span>
                  <span class="decimal" style="font-size: 15px; display: none;">00</span>
                </span>
                <span class="upon">起</span>
              </div>
              <span class="cinema-gpsAddress">
                距离未知
              </span>
            </div>
          </div>
          <!-- </router-link> -->
        </li>
      </ul>
    <!-- <router-view></router-view> -->
    </div>

    <div class="no-data" v-show="computedCinemaList.length === 0">
      暂无数据
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import { mapActions, mapState } from 'vuex'
// 可以使用van-list van-cell做数据渲染
export default {
  data () {
    return {
      btnClear: false,
      // cinemaList: this.$store.state.cinemaList,
      searchValue: '',
      isShowArea: true,
      isShowList: false,
      betterScroll: null
    }
  },
  computed: {
    ...mapState('CinemaModule', ['cinemaList']),
    ...mapState('CityModule', ['cityId']),
    computedCinemaList () {
      if (this.searchValue === '') return []
      return this.cinemaList.filter(item => item.name.toUpperCase().includes(this.searchValue.toUpperCase()) || item.address.toUpperCase().includes(this.searchValue.toUpperCase()))
    }
  },
  methods: {
    // ...mapMutations('CinemaModule', ['setCinemaList']),
    ...mapActions('CinemaModule', ['getCinemaList']),
    handleCancel () {
      this.$router.replace('/cinemas')
    },
    handleClear () {
      this.searchValue = ''
      this.btnClear = false
      this.isShowArea = true
      this.isShowList = false
    },
    handleChange () {
      if (this.searchValue.length !== 0) {
        if (!this.btnClear) this.btnClear = true
        if (this.isShowArea) this.isShowArea = false
        if (!this.isShowList) this.isShowList = true
      }
    }
  },
  watch: {
    isShowList () {
      if (this.betterScroll) {
        this.$nextTick(() => {
          this.betterScroll.refresh()
        })
      }
    }
  },
  mounted () {
    if (this.cinemaList && this.cinemaList.length === 0) {
      // vuex 异步流程
      // 状态立即更改 ，但是dom异步渲染
      // this.$store.dispatch('getCinemaList', this.cityId).then(() => {
      this.getCinemaList(this.cityId).then(() => {
        this.$nextTick(() => {
          this.betterScroll = new BetterScroll('.cinema-list-wrap', {
            scrollbar: {
              fade: true // 滚动的时候显示，不滚动的时候隐藏（滚动条会溢出滚动，添加position定位）
            }
          })
        })
      })
    } else {
      console.log('缓存')
      this.$nextTick(() => {
        this.betterScroll = new BetterScroll('.cinema-list-wrap', {
          scrollbar: {
            fade: true // 滚动的时候显示，不滚动的时候隐藏（滚动条会溢出滚动，添加position定位）
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";

.search-header {
  width: 100%;
  height: .5rem;
  padding: .1rem .14rem;
  background-color: #fff;
  z-index: 100;
  @include border-b-1px(#ededed);
  position: fixed;
  top: 0;
  left: 0;right: 0;
  .input-wrap {
    position: relative;
    display: inline-block;
    width: calc(100% - .43rem);
    height: .3rem;
    padding: 0 .34rem;
    background-color: #f4f4f4;
    border-radius: .03rem;
    font-size: .14rem;
    input {
      width: 100%;
      height: .3rem;
      background-color: #f4f4f4;
    }
    .icon-search {
      position: absolute;
      top: 50%;
      left: .1rem;
      margin-top: -.08rem;
    }
  }
  .right {
    position: absolute;
    width: .43rem;
    display: inline-block;
    text-align: right;
    font-size: .14rem;
    line-height: .3rem;
  }
}
.clear-mobile-btn {
  position: absolute;
  right: .08rem;
  top: .08rem;
  width: .14rem;
  height: .14rem;
  z-index: 1;
  img {
    width: 100%;
    height: 100%;
  }
}

.cinema-init-area, .no-data {
  padding-top: .5rem;
  min-height: 100vh;
}

.no-data {
  padding-top: 40%;
  text-align: center;;
}

.init-list {
  padding: 0 .14rem .08rem 0;
  margin-left: .14rem;
  position: relative;
}
.cinema-index-title {
  font-size: .13rem;
  color: #bdc0c5;
  margin: .18rem 0;
}
.cinema-index-detail {
   @include border-b-1px(#ededed);
}
.cinema-item-detail {
  float: left;
  padding-bottom: .1rem;
  padding-right: .1rem;
}
.cinema-item-text {
  height: .3rem;
  background-color: hsla(0,0%,95.7%,.6);
  border-radius: .03rem;
  font-size: .13rem;
  padding: .08rem .12rem;
}

.cinema-list-wrap {
  margin-top: .5rem;
  height: 100vh;
  overflow: hidden;
  position: relative; // 修正滚动条的位置
}
.cinema-list {
  //  margin-top: .5rem;
  li {
    padding: .14rem;
    background-color: #fff;
    @include border-b-1px(#ededed);
  }
}
.cinemas-info {
  width: calc(100vw - .84rem);
  span {
    display: block;
    width: 100%;
  }
}
.cinema-name {
  color: #191a1b;
  font-size: .15rem;
}

.cinema-price {
  font-size: .15rem;
  color: #ff5f16;
}
.cinema-address, .cinema-gpsAddress {
  display: block;
  font-size: .12rem;
  color: #797d82;
  margin-top: .02rem;
}
</style>
